<template>

    <div>

        <h2></h2>

        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.field_type" placeholder="搜索字段" size="mini">
                            <el-option label="持卡人手机号" value="card_mobile"></el-option>
                            <el-option label="用户ID" value="user_id"></el-option>
                            <el-option label="油卡卡号" value="card_no"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="充值状态">
                        <el-select v-model="params.status" placeholder="请选择" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="0" value="0" label="未支付"></el-option>
                            <el-option key="1" value="1" label="已支付"></el-option>
                            <el-option key="3" value="3" label="已完成"></el-option>
                            <el-option key="-1" value="-1" label="已取消"></el-option>
                            <el-option key="7" value="7" label="已退款"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道来源">
                        <el-select v-model="params.channel" placeholder="请选择渠道" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-for="item in channels" :key="item.open_code" :value="item.open_code" :label="item.nickname"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="油卡类型">
                        <el-select v-model="params.card_type" placeholder="请选择类型" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="1" value="1" label="中石化"></el-option>
                            <el-option key="2" value="2" label="中石油"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="充值类型">
                        <el-select v-model="params.type" placeholder="请选择类型" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="1" value="1" label="套餐"></el-option>
                            <el-option key="2" value="2" label="直充"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用系统">
                        <el-select v-model="params.platform" placeholder="请选择系统" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="android" value="android" label="安卓"></el-option>
                            <el-option key="ios" value="ios" label="苹果"></el-option>
                            <el-option key="wechart" value="wechart" label="微信"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用市场">
                        <el-select v-model="params.market" placeholder="请选择市场" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-if="params.platform=='ios'" key="appstore" value="appstore" label="苹果"></el-option>
                            <el-option key="offical" value="offical" label="官网"></el-option>
                            <el-option key="huawei" value="huawei" label="华为"></el-option>
                            <el-option key="xiaomi" value="xiaomi" label="小米"></el-option>
                            <el-option key="vivo" value="vivo" label="VIVO"></el-option>
                            <el-option key="oppo" value="oppo" label="OPPO"></el-option>
                            <el-option key="baidu" value="baidu" label="百度"></el-option>
                            <el-option key="360" value="360" label="360"></el-option>
                            <el-option key="yingyongbao" value="yingyongbao" label="应用宝"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐类型" v-if="params.type==1">
                        <el-select v-model="params.recharge" placeholder="请选择套餐" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-for="item in recharges" :key="item.months" :value="item.months" :label="item.title"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单时间">
                        <el-date-picker
                                v-model="params.datetime"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="截止日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                size="mini">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reload" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-alert
                    title="查询结果:"
                    type="success"
                    :closable="false"><el-tag>订单数:{{total}}笔</el-tag><el-tag>充值金额:{{total_recharge_amount}}元</el-tag><el-tag>付款金额:{{total_pay_amount}}元</el-tag>
                 </el-alert>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="订单ID"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_amount"
                        label="充值金额"
                        >
                </el-table-column>
                <el-table-column
                        label="优惠券"
                        >
                        <template slot-scope="scope">
                        <p v-if="scope.row.coupon">
                        抵扣{{scope.row.coupon.amount}}元
                        </p>
                        </template>
                </el-table-column>
                <el-table-column
                        label="充值周期"
                        >
                        <template slot-scope="scope">
                        <p v-if="scope.row.type==2">直充</p>
                        <p v-if="scope.row.type==1">{{scope.row.months}}个月套餐</p>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="pay_amount"
                        label="实付金额"
                        >
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="折扣"
                        >
                </el-table-column>
                <el-table-column label="油卡信息" width="200">
                    <template slot-scope="scope" v-if="scope.row.oil_card">
                        <p>类型:{{scope.row.oil_card.type_name}}</p>
                        <p>卡号:{{scope.row.oil_card.card_no}}</p>
                        <p>持卡人:{{scope.row.oil_card.name}}</p>
                        <p>手机号:<el-button type="text" @click="call(scope.row.oil_card.mobile_en, scope.row.oil_card.mobile)">{{scope.row.oil_card.mobile}}</el-button></p>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user.app_platform_cn"
                        label="平台"
                        >
                </el-table-column>
                <el-table-column
                        prop="user.app_channel_cn"
                        label="市场"
                        >
                </el-table-column>

                <el-table-column
                        prop="status_name"
                        label="状态"
                >
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="下单时间"
                >
                </el-table-column>
                <el-table-column
                        label="支付信息" width="180"
                >
                    <template slot-scope="scope" v-if="scope.row.pay">
                        <p>支付流水号:{{scope.row.pay.pay_sn}}</p>
                        <p>支付时间:{{scope.row.pay.paid_at}}</p>
                        <p>支付方式:{{scope.row.pay.payment_method}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" fixed="right" width="240"
                >
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="showTask(scope.row.id)">详情</el-button>
                        <el-button type="success" size="mini" @click="showCard(scope.row.id, scope.row.user_id)">换油卡</el-button>
                        <!--<el-button type="warning" v-if="scope.row.recharge_mode==1" size="mini" @click="showHandle(scope.row)">改手动</el-button>
                        <el-button type="warning" v-if="scope.row.recharge_mode==2" size="mini" @click="showHandle(scope.row)">改备注</el-button>-->
                        <el-button type="warning" v-if="scope.row.status==1 || scope.row.status==2 || scope.row.status==3" size="mini" @click="doRefund(scope.row.id)">退款</el-button>
                        <el-button type="warning" v-if="scope.row.status==0" size="mini" @click="doCancel(scope.row.id)">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <charge-task ref="chargeTask"></charge-task>
        <handle-recharge ref="handleRecharge"></handle-recharge>
        <change-card ref="changeCard"></change-card>

    </div>

</template>
<script>
    import ChargeTask from './RechargeTask.vue';
    import HandleRecharge from './HandleRecharge.vue';
    import ChangeCard from './ChangeCard.vue';
    export default {
      components: {
        ChargeTask,HandleRecharge,ChangeCard
      },
      data() {
        return {
          items: [],
          loading: true,
          channels:[],
          recharges:[],
          package:[],
          params: {
            type: 'all',
            card_type:'all',
            limit: 10,
            offset: 0,
            field_type: 'card_mobile',
            keyword: '',
            datetime: [],
            status:'all',
            channel:'all',
            recharge_mode:'all',
            platform:'all',
            market:'all'

          },
          currentPage: 1,
          total: 0,
          total_recharge_amount:0,
          total_pay_amount:0
        }
      },
      created() {
        this.fetchChannels();
        this.fetchRecharges();
        this.fetch();
      },
      methods: {
        fetchChannels(){
          axios.get('/admin/api/channels_kv').then((res)=>{
          if(res.data.code===0){
              this.channels = res.data.data;
          }
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          });
        },
        fetchRecharges(){
            axios.get('/admin/api/recharge').then((res)=>{
              if(res.data.code===0){
                  this.recharges = res.data.data.items;
              }
              }).catch(function() {
                this.$message('系统错误');
                this.loading = false;
              });
        },
        fetch() {
          axios.get('/admin/api/recharge_order', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
              this.total_recharge_amount = res.data.data.total_recharge_amount;
              this.total_pay_amount = res.data.data.total_pay_amount;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },
          call(mobileEn, mobile) {
              this.$confirm('是否拨打'+mobile, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.loading = true,
                      axios.post(
                          '/admin/api/call_mobile',
                          {mobile_en:mobileEn}
                      ).then((res) => {
                          if (res.data.code === 0) {
                              this.$message({
                                  type: 'success',
                                  message: '拨打成功!'
                              });
                          } else {
                              this.$message({
                                  type: 'error',
                                  message: res.data.msg
                              });
                          }
                          this.loading = false;
                      }).catch(function() {
                          this.$message('系统错误');
                          this.loading = false;
                      })
              }).catch(() => {
              });
          },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        showTask(orderId) {
          this.$refs.chargeTask.show(orderId);
        },
        showHandle(order){
          this.$refs.handleRecharge.show(order);
        },
        showCard(orderId, userId){
          this.$refs.changeCard.show(orderId, userId);
        },
        doRefund:function(order_id){
            let that = this
            this.$confirm('确定要退款吗？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(()=>{
                axios.post('/admin/api/recharge_order/refund',{order_id:order_id}).then(res=>{
                    if(res.data.code==0){
                        that.reload();
                    }
                });
            });
        },
        doCancel:function(order_id){
            let that = this
            this.$confirm('确定要取消吗？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(()=>{
                axios.post('/admin/api/recharge_order/cancel',{order_id:order_id}).then(res=>{
                    if(res.data.code==0){
                        that.reload();
                    }
                });
            });
        }
      }
    }
</script>